<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>操作Dom</title>
  <style></style>
</head>

<body>
  <div class="container">
    <div id="demo" style="width: 300px; font-size: 20px">demo</div>
    <div class="demo2">demo2</div>
    <div class="demo2 demo2-copy">demo2-copy</div>
    <p id="p1">这是文本。 这是文本。 这是文本。 这是文本。</p>
    <input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.display='none'" />
    <input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
    <br>
    <div id="p2" style="width: 300px; height: 200px;background-color: blueviolet;">

    </div>
    <p class="p1"></p>

    <button id="myBtn">试一试</button>
    <button id="Btn" onclick="addEvent()">添加事件监听器</button>
    <button onclick="remove()">移除事件监听器</button>
  </div>
</body>

</html>
<script>
  document.getElementById("demo").innerHTML = "首次复习操作dom";
  //   给Dom添加点击事件
  document.getElementById("demo").onclick = function () {
    console.log(this, "this"); //this:<div id="demo">首次复习操作dom</div>
    console.log(this.innerHTML);
  };
  let dom = document.querySelector(".demo2"); //通过类名获取dom元素 获取首个
  let dom2 = document.querySelector("#demo"); //通过id获取dom元素
  let domArr = document.querySelectorAll(".demo2"); //通过类名获取dom元素 得到一个类数组
  console.log(dom, "dom");
  console.log(dom.style);
  console.log(dom2);
  console.log(domArr);
  dom.style = "font-size:30px;"; //修改元素的样式
  console.log(dom);
  //   dom.setAttribute(attribute, value);

  //   改变CSS
  dom.style.color = "blue";

  //   添加元素 并赋予点击事件
  let demo2Copy = document.querySelector(".demo2-copy");
  let x = 1;
  function add() {
    x++;
    console.log("x:" + x);
  }
  demo2Copy.innerHTML = '<button onclick="add()">点击</button>';
  console.log(demo2Copy);
  function say() {
    console.log('猫吃鱼！')
    document.querySelector('.p1').innerHTML = '开启了事件监听器！' + Math.random()
  }

  // 添加事件监听器
  document.getElementById("myBtn").addEventListener("click", () => console.log('点击了事件监听器'))
  let p2 = document.querySelector('#p2')
  function addEvent() {
    p2.addEventListener("mousemove", say)//注意：函数名不加括号 否则只会执行一次 需要每次调用
    console.log(p2)
  }
  // 移除事件监听器
  function remove() {
    p2.removeEventListener("click", say)
  }
</script>